<template>
  <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="计算主机" name="host">
              <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="hostname"
                    label="主机名"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="ip"
                    label="IP地址"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="vCPU"
                    label="vCPU数"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="mem"
                    label="内存/G"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="instances"
                    label="虚机"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="disk"
                    label="硬盘容量/G"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="diskUsed"
                    label="已使用硬盘/G"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="diskLeft"
                    label="剩余硬盘/G">
                  </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="虚拟机" name="vm">
              <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    label="序号" 
                    type="index"
                    align="center" 
                    min-width="5%">
                  </el-table-column>
                  <el-table-column 
                    label="学号" 
                    prop="sid" 
                    sortable
                    min-width="9%"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    label="学生" 
                    prop="student" 
                    min-width="6%"
                    align="center">
                  </el-table-column>
                  
                  <el-table-column 
                    label="机器ID" 
                    prop="mid" 
                    min-width="20%">
                  </el-table-column>
                  <el-table-column 
                    label="IP地址" 
                    prop="ip"
                    min-width="20%"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    label="密码" 
                    prop="password"
                    min-width="10%"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    label="系统类型" 
                    prop="osType"
                    min-width="10%"
                    align="center">
                  </el-table-column>
                  <el-table-column 
                    label="状态" 
                    prop="status"
                    align="center"
                    min-width="10%">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.status | statusFilter">
                        {{scope.row.status}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  
                  <el-table-column 
                    label="详情" 
                    prop="profile"
                    align="center" 
                    min-width="30%">
                    
                  </el-table-column>
              </el-table>
            </el-tab-pane>
            
            <el-tab-pane label="镜像模板" name="image">
              <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="imgId"
                    label="镜像ID">
                  </el-table-column>
                  <el-table-column
                    prop="owner"
                    label="所有者"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="imgName"
                    label="名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="format"
                    label="格式"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="size"
                    label="大小"
                    width="180"
                    :formatter="formatter">
                  </el-table-column>
              </el-table>
            </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getImage, getHost } from '@/api/stack'
import { fetchMachines } from '@/api/machine'
const tableData = [{
    hostname: 'controller',
    ip: '192.168.1.1',
    vCPU: 6,
    mem: 6,
    instances: 4,
    disk: 30,
    diskUsed: 3,
    diskLeft: 27,
   }, {
    hostname: 'compute1',
    ip: '192.168.1.2',
    vCPU: 8,
    mem: 16,
    instances: 12,
    disk: 50,
    diskUsed: 11,
    diskLeft: 39,
   }, {
    hostname: 'compute2',
    ip: '192.168.1.3',
    vCPU: 4,
    mem: 3,
    instances: 4,
    disk: 20,
    diskUsed: 4,
    diskLeft: 16,
   },]
export default {
  name: 'Compute',
  components: {},
  data() {
    return {
      activeName: 'host',
      tableData: [],
      query:{
        aid: null,
        page: 1,
        limit: 10,
      },
    }
  },
  computed: {
    ...mapGetters([
      'uid',
      'role',
    ]),
  },
  created() {
    this.query.aid = this.uid
    this.getResList(this.activeName)
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.name, event);
      this.getResList(this.activeName)
    },
    getResList(resType) {
      if(resType == 'host'){
        this.tableData = tableData
        // getHost(this.query).then(response => {
        //   this.tableData = response.load.userList
        // }).catch(()=>{
        //   console.log("获取教师列表失败")
        // })
      }else if(resType == 'vm'){
        fetchMachines(this.query).then(response => {
          this.tableData = response.load.machineList
        }).catch(()=>{
          console.log("获取虚机列表失败")
        })
      }else{
        getImage(this.query).then(response => {
          this.tableData = response.load.osTypeList
        }).catch(()=>{
          console.log("获取镜像列表失败")
        })
      }
    },
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '运行中': 'success',
        '已关机': 'info',
        '挂起': 'warning', 
      }
      return statusMap[status]
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.tags-view-container {
  height: 40px;
  width: 100%;
  background: #fff;
  overflow: hidden;
  
}
.content-container{
  // height: calc(100vh - 40px - 50px);
}
</style>
